<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Life Navigation Graph</title>
    <style type="text/css">
        #container {margin: 0; padding: 10px 50px;background-color: seagreen;}
        .level {color: darkseagreen; margin: 3px; padding: 2px;}
        .level-name {font-size: 1.1rem;}
        .item {margin: 5px 0 5px 15px; display: inline-flex;}
        .item a {color: yellowgreen;}
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="container">
    <div class="level" id="level-header">
        <div><p>Microsoft Windows [版本 10.0.18363.1441]</p></div>
        <div><p>(c) 2021 Microsoft Corporation。保留所有权利。</p></div>
        <div><p>C:\Users\Life><strong id="special">_</strong></p></div>
        <div></div>
    </div>
    <div class="level" style="display: none;">
        <p class="level-name"><strong>投资</strong></p>
        <ul>
            <li>
                <div class="item"><a href="https://www.runoob.com/" title="CypherHunter">CypherHunter</a></div>
            </li>
            <li>
                <div class="item"><a href="https://www.runoob.com/">CoinMarketCap</a></div>
            </li>
        </ul>
    </div>
</div>
<script>
    $(document).ready(function () {
        loadXMLDoc(function (json) {
            var data = JSON.parse(json);
            console.log(data);
            for (let i = 0; i < data.length; i++) {
                template(data[i]);
            }
        });

        setInterval(function () {
            var $special = $('#level-header #special');
            var special = $special.text();
            if (special != null && special.length > 0) {
                $special.text('');
            } else {
                $special.text('_');
            }
        }, 600);

        var colors = ['rgb(0, 139, 139)', 'rgb(138, 43, 226)'];
        /*setInterval(function () {
            var $container = $('#container');
            var bgcolor = $container.css('background-color');
            if (bgcolor != null && bgcolor.length > 0) {
                var idx = 0;
                for (let i = 0; i < colors.length; i++) {
                    if (bgcolor == colors[i]) {
                        idx = i;
                    }
                }
                if (idx == colors.length-1) {
                    $container.css('background-color', colors[0]);
                } else {
                    $container.css('background-color', colors[idx+1]);
                }
            } else {
                $container.css('background-color', colors[0]);
            }
        }, 5000);*/
    });

    function loadXMLDoc(callback) {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var json = xmlhttp.responseText;
                if (callback != null && typeof callback === 'function') {
                    callback(json);
                }
            }
        }
        xmlhttp.open("GET", "./data.json", true);
        xmlhttp.send();
    }

    function template(jsonData) {
        var title = jsonData.title;
        var data = jsonData.data;
        var display = jsonData.display || 'block';

        var div = `<div class="level" style="display: ${display}"><p class="level-name"><strong>${title}</strong></p><ul>`;
        for (let i = 0; i < data.length; i++) {
            div += templateList(data[i]);
        }
        div += `</ul></div>`;

        $('#container').append(div);
    }

    function templateList(secondLevelData) {
        var title = secondLevelData.title;
        var data = secondLevelData.data;

        var ele = `<li>${title}`;
        for (let i = 0; i < data.length; i++) {
            ele += templateItem(data[i].title, data[i].desc, data[i].url);
        }
        ele += `</li>`;

        return ele;
    }

    function templateItem(title, desc, url) {
        return `<div class="item"><a href="${url}" title="${desc}" target="_blank">${title}</a></div>`;
    }

</script>
</body>
</html>